﻿<!DOCTYPE html>

<html>
<head>
    <title>授权系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/assets/css/bootstrap.css" rel="stylesheet" />
    <link href="~/assets/css/jquery.toast.css" rel="stylesheet" />
    <link href="~/assets/css/style.css" rel="stylesheet" />
    <link href="~/assets/css/login.css" rel="stylesheet" />
    <script src="~/assets/scripts/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[ajaxform]").click((item) => {
                console.log(item)
                var form = $(item.currentTarget).closest("form");
                var data = form.serialize();
                $.ajax({
                    type: 'post',
                    data: data,
                    beforeSend: () => {
                        $(".preloader").removeClass('hide');
                    },
                    complete:() => {
                        $(".preloader").addClass('hide');
                    },
                    success: (data) => {
                         toast.show(data.message, data.success,() => {
                             if (data.success) {
                                 window.location.href = data.redirect;
                             }
                         });

                    }
                });
            });
            var toast = (function ($) {
                return {
                    
                    timerhide : function (time,event) {
                        time = time ? time : 3500;
                        setTimeout(() => { event();this.hide() }, time);
                    },
                    show: function (message, success,callback) {
                        var box = $(".jq-toast-wrap");
                        var loader = box.find(".jq-toast-loader");
                        var content = box.find("#content");
                        loader.addClass(".jq-toast-loaded");
                        success
                            ? box.find(".jq-toast-single").removeClass("jq-icon-error").addClass("jq-icon-success")
                            : box.find(".jq-toast-single").removeClass("jq-icon-success").addClass("jq-icon-error");
                        content.text(message);
                        box.show();
                        this.timerhide(3500, callback);
                    },
                    hide: function () {
                        var box = $(".jq-toast-wrap");
                        box.hide();
                    }
                };
                
            })(jQuery);
            console.log(toast)
        });
        
    </script>
</head>
<body>
    <div class="preloader hide">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
        </svg>
    </div>
    <div class="jq-toast-wrap top-right hide">
        <div class="jq-toast-single jq-has-icon jq-icon-success">
            <span class="jq-toast-loader" style="-webkit-transition: width 3.1s ease-in; -o-transition: width 3.1s ease-in; transition: width 3.1s ease-in; background-color: #ff6849;"></span>
            <span class="close-jq-toast-single">×</span>
            <h2 class="jq-toast-heading">提示</h2>
            <p id="content"></p>
        </div>
    </div>
    <div class="wrapper">
        <div class="wrap">
            <div class="layout_panel">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h3 class="text-center">授权系统登录</h3>
                                @using (Html.BeginForm(FormMethod.Post, new { @class = "form-material m-t-40", id = "loginform" }))
                                {
                                    <div class="form-group row">
                                        <label class="col-md-3 text-right">登录账号</label>
                                        <div class="col-md-9">
                                            @Html.TextBox("username", "", new { @class = "form-control form-control-line", placeholder = "请输入账号" })
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 text-right">登录密码</label>
                                        <div class="col-md-9">
                                            @Html.Password("password", "", new { @class = "form-control form-control-line", placeholder = "请输入密码" })
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <span class="col-md-3"></span>
                                        <div class="col-md-3">
                                            <button type="button" ajaxform class="btn btn-block btn-outline-info"><i class="mdi mdi-login-variant"></i>&nbsp;登录</button>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-block btn-outline-secondary"><i class="mdi mdi-lock-open-outline"></i>&nbsp;忘记密码</button>
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>